<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<style>
.widget-body {
	position: relative;
}

.widget-body .col-xs-2.open {
	position: static;
}

.widget-body ul.dropdown-menu {
	right: 0;
}
.background-red{
	background-color: red !important;
	color:white !important;
}
</style>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>


<!-- Custom CSS -->
<link href="${ctx}/static/css/sb-admin.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="${ctx}/static/css/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="${ctx}/static/css/font-awesome.min.css" rel="stylesheet"
	type="text/css">

<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />

<!-- vis style -->
<link href="${ctx}/static/css/vis.css" rel="stylesheet"
	type="text/css">

<script type="text/javaScript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>

<!-- vis.js -->
<script type="text/javaScript"
	src="${ctx}/static/js/vis.min.js"></script>
	
<!-- jquery sparkline -->
<script type="text/javaScript" src="${ctx}/static/js/jquery.sparkline.min.js"></script>
	
<!--[if !IE]> -->

<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='${ctx}/static/ace/js/jquery-2.0.3.min.js'>"
							+ "<"+"/script>");
</script>

<!-- <![endif]-->
<script src="${ctx}/static/ace/js/jquery.easy-pie-chart.min.js"></script>


<script type="text/javascript">
	var dataSets = ${dataSetList};//交换关系图节点json  '{}';
	var edgeList = ${edgeList};//交换关系图连线json
	var oldNodes = new Array();
	var chartDatas = ${chartDatas};
	$(function(){
		$('.tipMe').tooltip({'placement':'top'});
	});
	$(document).ready(function() {
		drawCharts();
		
		$('.easy-pie-chart.percentage').each(function() {
			$(this).easyPieChart({
				barColor : $(this).data('color'),
				trackColor : '#EEEEEE',
				scaleColor : false,
				lineCap : 'butt',
				lineWidth : 1,
				size : 30
			}).css('color', $(this).data('color'));
		});
		
		adjustHeight();
		
		//定时刷新页面
		//setInterval("refreshPage()", 180000);
		
		dsBlink();
		
		
		
		//resizeCanvas();
		visDraw();
		
		//防止下拉菜单在内部点击关闭
		$(document).on('click', '.dropdown-menu', function (e) {
			e.stopPropagation();
		});
		
		//sparkline chart
		drawSparkLineChart();
	});
	
	function drawSparkLineChart() {
		$('.charts').each(function(index) {
			var myvalues = chartDatas[index];
			$(this).sparkline(myvalues, {height: '20px', width: '350px', spotColor: false, 
				  maxSpotColor:'red', minSpotColor: false, spotRadius:'2', 
				  valueSpots:{':0':'#999999'}, lineColor:'#c23531', fillColor:'#d7d7d7',
				  tooltipFormat: '<span>{{offset}}时: {{y}}次</span>',
				  });
		});
		//var myvalues = [10,8,5,7,4,4,0,0,0,0,0,0,1,4,7,2,9,13,4,3,2,7,0,0];
		//var myvalues = [[0,0],[1,0],[2,0],[3,1]];
        /* $('.charts').sparkline(myvalues, {height: '20px', width: '300px', spotColor: false, 
        								  maxSpotColor:'red', minSpotColor: false, spotRadius:'2', 
        								  valueSpots:{':0':'grey'}, lineColor:'#7dc6ff', fillColor:'#7dc6ff',
        								  tooltipFormat: '<span>{{offset}}时: {{y}}次</span>'
        								  }); */
        /* tooltipValueLookups: {
	        levels: $.range_map({ '0': '0, 0', '0': '1, 0', '0': '3,0', '1': '3时: 1'})
	    } */
	}
	
	function dsBlink() {
			setInterval(function (index) {
			    $(".disconnected").toggleClass( "background-red" );
			}, 500);
	}
	
	function refreshPage() {
		window.location.reload(true);
	}
	
	function getDsInfo() {
		$.ajax({
			   type: "POST",
			   dataType:"html",
			   cache: false,
			   url: _ctx + "/monitor/get_ds.do",
			   data: {type:'0'},
			   success: function(content){
				   $('#dsDiv').html( content );
			   },
			   error:function(){
				   parent.ui.msg( '获取数据源链接状态失败',0 );
			   }
		});
	}
	
	function adjustHeight() {
		if($('#wb1').height() < $('#wb2').height()) {
			$('#wb1').css("height", $('#wb2').height());
		} else {
			$('#wb2').css("height", $('#wb1').height());
		}
	}
	
	function drawCharts(){
		var list = new Array();
		$('.charts').each(function(index) {
			var id = $(this).attr("id");
			list.push(id);
		});
		
		$.each(list, function(index, taskId) {
			$.post(_ctx + "/monitor/get_data.do", {
				id : taskId
			}, function(resp) {
				if (resp.status == '1') {
					/* var myChart = new FusionCharts(
							"${ctx}/static/FusionCharts/Charts/Line.swf", "test",
							"100%", "100", "0", "0");
					myChart.setDataXML(resp.data);
					myChart.render(taskId); */
					/* window.parent.setIframeHeight(window.parent.document
							.getElementById('content')); */
				} else {
					parent.ui.msg(resp.msg, 0);
				}
			});
		});
	}
	
	function resizeCanvas() {
		var width = $('#canvas_div').width();
		$('#canvas_div').height(width);
		$('#canvas').width(width);
		$('#canvas').height(width);
		$('#ds_div').height(width - 24);
		
	}
	//绘制节点关系图
	function visDraw() {
		var numOfNodes = dataSets.length;
		//半径
		var radius = 100;
		for(var i = 0; i < numOfNodes; i++) {
			var angle = (i / (numOfNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed.
			var x = (radius * Math.cos(angle)) + $('#canvas_div').width()/2+10; // Calculate the x position of the element.
			var y = (radius * Math.sin(angle)) + $('#canvas_div').height()/2 - 1; // Calculate the y position of the element.
			//坐标
			dataSets[i].x = x;
			dataSets[i].y = y;
			dataSets[i].shadow = {
					size:1,
					enabled:true
			};
			dataSets[i].borderWidth = 1;
			//背景色
			dataSets[i].color = {
					background : '#2091cf',
					border : false
			};
			//字体
			dataSets[i].font={
					size : 14,
					face : 'arial',
					color : "#fff"
			};
			//节点形状
			dataSets[i].shape= 'box';
		}
		
		var nodes = new vis.DataSet(dataSets);

		  // create an array with edges
		  var edges = new vis.DataSet(edgeList);

		  // create a network
		  var container = document.getElementById('canvas_div');
		  var data = {
		    nodes: nodes,
		    edges: edges
		  };
		  var width = $('#canvas_div').width();
		  var height = $('#canvas_div').height();
		  var options = {
			
		    width: width + 'px',
		    height: height + 'px',
		    nodes: {
		      shape: 'dot',
		      borderWidthSelected: 1,
		      color: {
		         border: '#2B7CE9',
		          highlight: {
		            border: '#2B7CE9',
		          }
		      },
		      font: {
		          size: 20, // px
		          color:'#fff',
		          align: 'center'
		        }
		    },
		    edges: {
		    	 color: {
		    	      color:'#428bca',
		    	      highlight:'#428bca',
		    	      inherit: false
		    	    },
		    	smooth: {
		        	type: 'continuous'
		        }
		    },
		    //节点移动
		    interaction: {
		      dragNodes: true,// do not allow dragging nodes
		      zoomView: false, // do not allow zooming
		      dragView: true  // do not allow dragging canvas
		    }
		  };
		  var network = new vis.Network(container, data, options);
		   network.moveTo({
		    position: {x: 0, y: 0},
		    offset: {x: -width/2, y: -height/2},
		    scale: 1,
		  });  
		  
	}
	
	function showDsInfo(dsType, isAlert, nodeName, dbUrl, dbUserName, 
			 	        diskDir, disUserDir, ftpIp, ftpUserName, ftpUserDir){
		$(".custom").hide();
		$('#node_name').html(nodeName);
		
		if(dsType == "1") {
			$(".db_cell").show();
			$('#db_url').html(dbUrl);
			$('#db_username').html(dbUserName);
			if(isAlert == "1") {
				$('#error_msg').html("数据库无法连接！");
				$(".error_cell").show();
			}
		} else if(dsType == "2") {
			$('#disk_dir').html(diskDir);
			$('#disk_user_dir').html(disUserDir);
			$(".disk_cell").show();
		} else if(dsType == "3") {
			$(".ftp_cell").show();
			$('#ftp_ip').html(ftpIp);
			$('#ftp_username').html(ftpUserName);
			$('#ftp_user_dir').html(ftpUserDir);
			if(isAlert == "1") {
				$('#error_msg').html("目录空间不足！");
				$(".error_cell").show();
			}

		} 
		
		var hiddenByClick = false;
		window.parent.iframeModal("dsInfoModal", $("#dsInfoModalDiv").html(),
				hiddenByClick);
	}
</script>

</head>
<body style="margin-top: 0px;">
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<!-- <div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页
						</li>
						<li>实时监控&nbsp;&nbsp;&nbsp;&nbsp;
					</ul>
					
					<div class="widget-toolbar no-border">
						<a name="notAdminButton"class="btn btn-primary btn-xs" href="javascript:location.reload();" ><i class="icon-refresh"></i> 刷新&nbsp;&nbsp;</a>
					</div>
				</div> -->
				<div class="page-content">
					<div class="row">
						
						<div class="col-xs-8">
							
							<div class="widget-box transparent">
								
								<div class="widget-header">
									<h4 style="font-size:13px;color: #478fcd;font-weight: bold;" ><img src="${ctx}/static/images/network_connection.png" style="width:24px;padding-bottom: 2px">&nbsp;&nbsp;数据源监控</h4>
								</div>
								
								<div class="widget-body" style="border: 1px solid #CCC; margin-top:5px; overflow-y: auto; height:300px;">
									<div class="widget-main" id="ds_div">
										<div class="row">
											<c:forEach var="ds" items="${dsList}">
											<div class="col-xs-6">
											
											
												<div id='${ds.id}' class="widget-body ds-box" style="border: solid 1px #CCC; height:45px; margin-bottom:20px;border-radius:10px;
												     background:linear-gradient(to right, #B9DCED 2% , white 98%);">
													<div class="col-xs-1" style="height:45px; font-size:28px; width:20%; text-align: center">
																<c:if test="${ds.type == '1'}">
																	<c:if test="${ds.dataSourceConfVo.dbType == '11'}">
																		<img class="img-responsive" src="${ctx}/static/images/monitor/oracle2.png" style="display:initial; margin-left:-6px; margin-bottom:5px">
																	</c:if>
																	<c:if test="${ds.dataSourceConfVo.dbType == '12'}">
																		<img class="img-responsive" src="${ctx}/static/images/monitor/mySql2.png" style="display:initial; margin-left:-6px;margin-bottom:5px">
																	</c:if>
																	<c:if test="${ds.dataSourceConfVo.dbType == '13'}">
																		<img class="img-responsive" src="${ctx}/static/images/monitor/SQLServer2.png" style="display:initial; margin-left:-6px;margin-bottom:5px">
																	</c:if>
																</c:if>
																<c:if test="${ds.type == '3'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/ftp.png" style="display:initial; margin-left:-6px;margin-bottom:5px">
																</c:if>
																
																<c:if test="${ds.type == '4'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/mail.png" style="display:initial; margin-left:-6px;margin-bottom:5px">
																</c:if>
																<c:if test="${ds.type == '5'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/app.png" style="display:initial; margin-left:-6px;margin-bottom:5px">
																</c:if>
													</div>
													<div class="col-xs-9 <c:if test="${ds.needAlert eq 1}"></c:if>" 
																<c:choose>
																<c:when test="${ds.needAlert eq 1}">
																	style="height:30px;text-align:center; border: none 0px ; width:63.3333%;border-radius:2px;
													                             margin-top: 6px; display: flex; align-items: center;
													                             justify-content: left; background-color: #d9534f; font-size:13px; color:white;">
																	
																</c:when>
																<c:otherwise>
																style="height:30px;text-align:left; border: none ; width:63.3333%;border-radius:2px;
													                             margin-top: 6px; display: flex; align-items: center;
													                             justify-content: left; background-color: #5cb85c; font-size:13px; color:white;">
													            </c:otherwise>
																</c:choose>
														${ds.name}
													</div>
													<div class="col-xs-2 action-buttons" style="height:43px; font-size: 22px; margin-top:4px; text-align: center;">
														<a onclick="showDsInfo('${ds.type}', '${ds.needAlert}', '${ds.nodeName}', '${ds.dataSourceConfVo.url}', 
														                        '${ds.dataSourceConfVo.userName}', '${ds.dataSourceConfVo.diskDirectory}', 'dis_test',
														                        'ip_test', 'ftp_username_test', 'ftp_user_dir_test');" style="color:black;">
															<i  aria-hidden="true">
															  	<img  src="${ctx}/static/images/more.png" style="display:initial; margin-left:-6px;width: 16px ">
															</i>
														</a>
														
														<ul class="dropdown-menu dropdown-menu-right" role="menu" style="padding:13px;">
															<li>
															<div class="table-responsive">
															<table class="table table-bordered keep-open" style="margin-bottom:0; font-size:12px;">
																<tbody>
																	<tr>
																		<td>
																			所属节点:
																		</td>
																		<td>
																			${ds.nodeName}
																		</td>
																	</tr>
																	
																	<c:if test="${ds.type == '1'}">
																		<tr>
																			<td>
																				URL:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.url}
																			</td>
																		</tr>
																		
																		<tr>
																			<td>
																				用户名:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.userName}
																			</td>
																		</tr>
																		<c:if test="${ds.needAlert eq 1}">
																			<tr class="background-red">
																				<td>
																					异常情况:
																				</td>
																				<td>
																					数据库无法连接！
																				</td>
																			</tr>
																		</c:if>
																	</c:if>
																	
																	<c:if test="${ds.type == '2'}">
																		<tr>
																			<td>
																				磁盘目录:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.diskDirectory}
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户目录:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																	</c:if>
																	
																	<c:if test="${ds.type == '3'}">
																		<tr>
																			<td>
																				IP/端口:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.diskDirectory}
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户名:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户目录:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																		<c:if test="${ds.needAlert eq 1}">
																			<tr class="background-red">
																				<td>
																					异常情况:
																				</td>
																				<td>
																					目录空间不足！
																				</td>
																			</tr>
																		</c:if>
																	</c:if>
																	
																	<c:if test="${ds.type == '4'}">
																		
																	</c:if>
																	
																	<c:if test="${ds.type == '5'}">
																		
																	</c:if>
																</tbody>
															</table>
															</div>
															</li>
														</ul>
													</div>
												</div>
											</div>
											</c:forEach>
											
											<%-- <c:forEach var="ds" items="${dsList}">
											<div class="col-xs-6">
											
											
												<div id='${ds.id}' class="widget-body ds-box" style="border: solid 1px #CCC; height:45px; margin-bottom:20px;
												     background:linear-gradient(to right, #85e2f0 5% , white 95%);">
													<div class="col-xs-3" style="height:45px; font-size:28px; width:20%;">
																<c:if test="${ds.type == '1'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/db.png" style="display:initial; margin-left:-6px; width:70%; height:25px;">
																	<c:if test="${ds.dataSourceConfVo.dbType == '11'}">
																		<img class="img-responsive" src="${ctx}/static/images/datasource/oracle.png" style="display:initial; margin-left:-6px; width:30%; height:16px;">
																	</c:if>
												
																	<c:if test="${ds.dataSourceConfVo.dbType == '12'}">
																		<img class="img-responsive" src="${ctx}/static/images/datasource/mysql.png" style="margin-left:-9px; display:initial; width:30%; height:27px;">
																	</c:if>
																	
																	<c:if test="${ds.dataSourceConfVo.dbType == '13'}">
																		<img class="img-responsive" src="${ctx}/static/images/datasource/sqlserver.png" style="display:initial; margin-left:-6px; width:30%; height:16px;">
																	</c:if>
																</c:if>
																
																<c:if test="${ds.type == '2'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/server.png" style="display:initial; margin-left:-6px; width:70%; height:25px;">
																</c:if>
																
																<c:if test="${ds.type == '3'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/ftp.png" style="display:initial; margin-left:-6px; width:70%; height:25px;">
																</c:if>
																
																<c:if test="${ds.type == '4'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/mail.png" style="display:initial; margin-left:-6px; width:70%; height:25px;">
																</c:if>
																
																<c:if test="${ds.type == '5'}">
																	<img class="img-responsive" src="${ctx}/static/images/datasource/app.png" style="display:initial; margin-left:-6px; width:55%; height:28px;">
																</c:if>
													</div>
														
													<div class="col-xs-7 
																<c:if test="${ds.needAlert eq 1}">
																	disconnected
																</c:if>" 
																style="height:30px;text-align:center; border: solid 1px rgba(153, 153, 153, 1); width:63.3333%;
													                             margin-top: 6px; display: flex; align-items: center;
													                             justify-content: center; background-color: #42d442; font-size:13px; color:white;">
														${ds.name}
													</div>
														
													<div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;">
														<a data-toggle="dropdown" onclick="test(this);">
															<i class="icon-angle-down icon-only"></i>
														</a>
														
														<ul class="dropdown-menu dropdown-menu-right" role="menu" style="padding:13px;">
															<li>
															<div class="table-responsive">
															<table class="table table-bordered keep-open" style="margin-bottom:0; font-size:12px;">
																<tbody>
																	<tr>
																		<td>
																			所属节点:
																		</td>
																		<td>
																			${ds.nodeName}
																		</td>
																	</tr>
																	
																	<c:if test="${ds.type == '1'}">
																		<tr>
																			<td>
																				URL:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.url}
																			</td>
																		</tr>
																		
																		<tr>
																			<td>
																				用户名:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.userName}
																			</td>
																		</tr>
																		<c:if test="${ds.needAlert eq 1}">
																			<tr class="background-red">
																				<td>
																					异常情况:
																				</td>
																				<td>
																					数据库无法连接！
																				</td>
																			</tr>
																		</c:if>
																	</c:if>
																	
																	<c:if test="${ds.type == '2'}">
																		<tr>
																			<td>
																				磁盘目录:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.diskDirectory}
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户目录:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																	</c:if>
																	
																	<c:if test="${ds.type == '3'}">
																		<tr>
																			<td>
																				IP/端口:
																			</td>
																			<td>
																				${ds.dataSourceConfVo.diskDirectory}
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户名:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																		<tr>
																			<td>
																				用户目录:
																			</td>
																			<td>
																				test
																			</td>
																		</tr>
																		<c:if test="${ds.needAlert eq 1}">
																			<tr class="background-red">
																				<td>
																					异常情况:
																				</td>
																				<td>
																					目录空间不足！
																				</td>
																			</tr>
																		</c:if>
																	</c:if>
																	
																	<c:if test="${ds.type == '4'}">
																		
																	</c:if>
																	
																	<c:if test="${ds.type == '5'}">
																		
																	</c:if>
																</tbody>
															</table>
															</div>
															</li>
														</ul>
													</div>
												</div>
											</div>
											</c:forEach> --%>
										</div>
									</div>
								</div>
							</div>
						</div>
						
						
						<div class="col-xs-4">
							<div class="widget-box transparent">
								<div class="widget-header" style="font-size:13px;">
									<h4 class="lighter " style="font-size:13px;color: #478fcd;font-weight: bold;"><img src="${ctx}/static/images/network.png" style="width:24px;padding-bottom: 2px">&nbsp;&nbsp;数据源关系图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
								</div>
								
								<!-- <canvas id="canvas" 
									style=" border: 1px solid #CCC; 
									cursor: default; height:300px;
									margin-top:5px">
								</canvas> -->
								
								<div class="widget-body" style="border: 1px solid #CCC; margin-top:5px;">
									<div id="canvas_div" style="height:300px;">
										
													
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<br>
					
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box transparent">
								<div class="widget-header">
									<h4 style="font-size:13px;color: #478fcd;font-weight: bold;"><img src="${ctx}/static/images/task.png" style="width:24px; padding-bottom: 0px;">&nbsp;&nbsp;任务监控</h4>
									<span style="font-size:12px;color: #ADA0A5;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每小时同步次数实时监控
									
									<span style="font-size:12px; margin-left:10px; color:#999999;"><i class="fa fa-circle" aria-hidden="true"></i></span>
									无值
									<span style="font-size:12px; margin-left:10px;  color:red;"><i class="fa fa-circle" aria-hidden="true"></i></span>
									峰值
									</span>
								</div>
								
								<div class="widget-body" style="margin-top: 15px; padding:5px;">
									<div class="row">
										<c:forEach items="${tasks}" var="task">
											<div class="col-xs-6" style="margin-top:10px;">
												<div class="row">
													<div class="col-xs-4">
														<span class="tipMe" data-rel="tooltip" style="font-size:12px;margin-bottom:-4px;font-weight: bold;" title="${task.taskName}">${cm:lmitStrPx(task.taskName,150)}&nbsp;</span>
													</div>
													
													<div class="col-xs-8">
														<span id='${task.id}' class="charts"></span>
													</div>
												</div>
												<hr style="margin-top:10px;height:1px;border:none;border-top:1px dashed #cccccc;">
												<%-- <label style="margin-top:23px; margin-right:15px;">${task.taskName}:</label>
												<span class="inlinesparkline"></span> --%>
												<%-- <div class="row">
													<div class="col-xs-2" align="center">
														<div style="height:104px;" align="center">
															${task.taskName}
														</div>
													</div>
														
													<div class="col-xs-12">
														<span class="label label-primary arrowed-right arrowed-nn-right">${task.taskName}</span>
														<div class="charts" id='${task.id}' align="center">
															<p class="text-center" style="font-size: 25px; color: #428bca;">
																<span class="icon icon-cog icon-spin">
																</span>
															</p>
															<p class="text-center" style="font-size: 12px; color: #428bca; margin-top: -10px; margin-bottom: 0px;">
																<span>加载中...</span>
															</p>
														</div>
													</div>
												</div> --%>
											</div>
										</c:forEach>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box transparent">
								<div class="widget-header">
									<h4 class="lighter" style="font-size:13px;color: #478fcd;font-weight: bold;"><img src="${ctx}/static/images/server.png" style="width:36px;"></i>&nbsp;&nbsp;基础环境监控</h4>
								</div>
								
								<div class="widget-body" style="margin-top: 5px;">
										<div class="row">

											<div class="widget-container-span col-sm-6">
												<div class="panel panel-primary">
													<div class="panel-heading">J2EE容器监控</div>

													<div class="widget-body" id="wb1">
														<div class="widget-main">
														
														<p><b>[服务器]:&emsp;</b>${basicInfo.ip}&emsp;<b>[系统]:&emsp;</b>${basicInfo.os_name}&emsp;<b>[CPU个数]:&emsp;</b>${basicInfo.numOfCore}个</p>
														<p><b>[内存]:&emsp;</b>物理内存共：${basicInfo.totalPhysicalMemory}G&emsp;虚拟内存共：${basicInfo.totalVMMemory}G</p>
														<p><b>[JDK]:&emsp;</b>${basicInfo.jdk}</p>
														<p><b>[JVM]:&emsp;</b> ${basicInfo.xms}&emsp;
																			   ${basicInfo.xmx} &emsp;
																			   ${basicInfo.permSize}&emsp;
																			   ${basicInfo.maxPermSize}&emsp;
														<p><b>堆已用:&emsp;</b>${basicInfo.heapUsed}m&emsp;<b>非堆已用:&emsp;</b>${basicInfo.noneHeapUsed}m&emsp;
														<b>垃圾回收次数:&emsp;</b>${basicInfo.gcCount}次&emsp;
														<b>线程总数:&emsp;</b>${basicInfo.threadCount}&emsp;<b>守护线程数:&emsp;</b>${basicInfo.daemonThreadCount}</p>
																		      
																		  
														</div>
													</div>
												</div>
											</div>

											<div class="widget-container-span col-sm-6">
												<div class="panel panel-primary">
													<div class="panel-heading">服务器监控</div>

													<div class="widget-body" id="wb2">

														<div class="widget-main">

															
															<c:choose>
																<c:when test="${basicInfo.cpuUsedRate.needAlert eq 0 }">
																	<c:set var="cpuColor" value="#87CEEB" />
																</c:when>
																<c:otherwise>
																	<c:set var="cpuColor" value="#D15B47" />

																</c:otherwise>
															</c:choose>
															<c:choose>
																<c:when test="${basicInfo.pmUsedRate.needAlert eq 0 }">
																	<c:set var="pmColor" value="#87CEEB" />
																</c:when>
																<c:otherwise>
																	<c:set var="pmColor" value="#D15B47" />

																</c:otherwise>
															</c:choose>

															

															<div class="row" >
																<div class="col-sm-6"  style="text-align:center;">
																	<div class="easy-pie-chart percentage" id="cpu_percent" 
																		data-percent="${basicInfo.cpuUsedRate.value}"
																		data-color="${cpuColor}">
																		<span class="percent">${basicInfo.cpuUsedRate.value}</span>%
																	</div>
																</div>
																
																<div class="col-sm-6" style="text-align:center;">
																	<div class="easy-pie-chart percentage" id="fs_percent"
																		data-percent="${basicInfo.pmUsedRate.value}"
																		data-color="${pmColor}">
																		<span class="percent">${basicInfo.pmUsedRate.value}</span>%
																	</div>
																</div>
															</div>
															<div class="row">
																<div class="col-sm-6" style="text-align:center;color: #667e99;">
																	<p></p>
																	<span>CPU使用率 </span>
																</div>
																<div class="col-sm-6" style="text-align:center;color: #667e99;">
																	<p></p>
																	<span>物理内存</span>
																</div>
															</div>
															<div class="row" style="height: 50px;">
																<div class="col-xs-12">
																	<div class="profile-info-name col-xs-1" style="padding-top: 20px;">磁盘使用率</div>
																	<div class="profile-info-value col-xs-8" style="padding-top: 20px;">
																		<div class="progress " style="width: 300px;" data-percent=" ${basicInfo.fsUsedRate.value }%">
																			<c:choose>
																				<c:when test="${basicInfo.fsUsedRate.value gt 90}">
																					<div class="progress-bar progress-bar-danger"
																						style="width:${basicInfo.fsUsedRate.value }%;"></div>
																				</c:when>
																				<c:when
																					test="${basicInfo.fsUsedRate.value gt 70 && basicInfo.fsUsedRate.value le 90}">
																					<div class="progress-bar progress-bar-warning"
																						style="width:${basicInfo.fsUsedRate.value }%;"></div>
																				</c:when>
																				<c:otherwise>
																					<div class="progress-bar progress-bar-success"
																						style="width: ${basicInfo.fsUsedRate.value }%; background-color:#32dd6f;"></div>
																				</c:otherwise>
																			</c:choose>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

										</div>
									</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div id="dsInfoModalDiv" style="display: none;">
		<div class="modal-dialog modal-sm">
			<div class="modal-content" id="tableDiv_1">
			
				<div class="modal-body overflow-visible">
															<table class="table table-bordered keep-open" style="margin-bottom:0; font-size:12px;">
																<tbody>
																	<tr>
																		<td>
																			所属节点:
																		</td>
																		<td id="node_name">
																		</td>
																	</tr>
																	
																		<tr class="db_cell custom">
																			<td>
																				URL:
																			</td>
																			<td id="db_url">
																			</td>
																		</tr>
																		
																		<tr class="db_cell custom">
																			<td>
																				用户名:
																			</td>
																			<td id="db_username">
																			</td>
																		</tr>
																		

																		<tr class="disk_cell custom">
																			<td>
																				磁盘目录:
																			</td>
																			<td id="disk_dir">
																			</td>
																		</tr>
																		<tr class="disk_cell custom">
																			<td>
																				用户目录:
																			</td>
																			<td id="disk_user_dir">
																			</td>
																		</tr>
																	
																		<tr class="ftp_cell custom">
																			<td>
																				IP/端口:
																			</td>
																			<td id="ftp_ip">
																			</td>
																		</tr>
																		<tr class="ftp_cell custom">
																			<td>
																				用户名:
																			</td>
																			<td id="ftp_username">
																			</td>
																		</tr>
																		<tr class="ftp_cell custom">
																			<td>
																				用户目录:
																			</td>
																			<td id="ftp_user_dir">
																			</td>
																		</tr>
																	
																	
																	<tr class="background-red error_cell custom">
																		<td>
																			异常情况:
																		</td>
																		<td id="error_msg" >
																			数据库无法连接！
																		</td>
																	</tr>
																</tbody>
															</table>
				</div>
				<div class="modal-footer">
          			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        		</div>
				
			</div>
		</div>
	</div>
</body>
</html>
